<template>
    <transition 
        enter-active-class="animate__animated animate__fadeIn"
        leave-active-class="animate__animated animate__fadeOut"
    >
        <div class="modal-wrap" v-show="visible">
            <transition 
                enter-active-class="animate__animated animate__slideInUp"
                leave-active-class="animate__animated animate__fadeOut"
                duration='500'
            >
                <div class="modal-content"  v-show="visible">
                    <slot></slot>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>
export default {
    name:'modal',
    props:{
        visible:{
            type:Boolean,
            default:true
        }
    }
}
</script>

<style lang="scss" scoped>
    .modal-wrap{
         @include size(100%,100%);
         position: fixed;
         top:0;
         left:0;
         background: rgba(0,0,0,.5);
         z-index:99;
         display: flex;
         align-items:flex-end;
    }

    .modal-content{
        width:100%;
        background: #fff;
        max-height: 200px;
        height:200px;
        overflow: auto;
    }
</style>

